<template>
   <div class="home-right">
     <div class="home-right-title">
         <div class="home-right-title-item"  @click="homeTitle(1)">
             <div :class="homeConten==1?'title-active':''">最近7天</div>
             <div class="active-title-line" v-show="homeConten==1"></div>
         </div>
         <div class="home-right-title-item"  @click="homeTitle(2)">
             <div  :class="homeConten==2?'title-active':''">最近30天</div>
             <div class="active-title-line" v-show="homeConten==2"></div>
         </div>
         <div class="home-right-title-item"   @click="homeTitle(3)">
             <div :class="homeConten==3?'title-active':''">最近三个月</div>
             <div class="active-title-line" v-show="homeConten==3"></div>
         </div>
         <div class="home-right-title-item"   @click="homeTitle(4)">
             <div :class="homeConten==4?'title-active':''">最近半年</div>
             <div class="active-title-line" v-show="homeConten==4"></div>
         </div>
         <div class="home-right-title-item"   @click="homeTitle(5)">
             <div :class="homeConten==5?'title-active':''">最近一年</div>
             <div class="active-title-line" v-show="homeConten==5"></div>
         </div>
     </div>
     <div class="home-right-content" >
        <div class="home-content-item" >
            <div class="content-center">
                <div class="content-center-img">
                    <img src="../../assets/img/Oval2@2x.png"/>
                </div>
                <div>
                    <div class="content-center-title">楼盘上架</div>
                    <div class="content-center-source">盘源</div>
                    <div class="content-center-num">{{linkerSize}}<span>个</span></div>
                </div>
            </div>
            <div class="content-lately">{{homeInfo.lableField}}</div>
        </div>
         <div class="home-content-item">
             <div class="content-center">
                 <div class="content-center-img">
                     <img src="../../assets/img/Oval21@2x.png"/>
                 </div>
                 <div>
                     <div class="content-center-title">拓展业绩</div>
                     <div class="center-source-list">
                         <div class="center-source-list-item">
                             <div class="content-center-source">推荐</div>
                             <div class="content-center-num">{{csMap.recommand}}<span>个</span></div>
                         </div>
                         <div class="center-source-list-item">
                             <div class="content-center-source">消费</div>
                             <div class="content-center-num">{{csMap.consume}}</div>
                         </div>
                         <div class="center-source-list-item">
                             <div class="content-center-source">拓客</div>
                             <div class="content-center-num">{{csMap.customer}}</div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="content-lately">{{homeInfo.lableField}}</div>
         </div>
         <div class="home-content-item">
             <div class="content-center">
                 <div class="content-center-img">
                     <img src="../../assets/img/Oval22@2x.png"/>
                 </div>
                 <div>
                     <div class="content-center-title">客户报备</div>
                     <div class="center-source-list">
                         <div class="center-source-list-item">
                             <div class="content-center-source">报备单</div>
                             <div class="content-center-num">{{epMap.report}}<span>个</span></div>
                         </div>
                         <div class="center-source-list-item">
                             <div class="content-center-source">现场带看</div>
                             <div class="content-center-num">{{epMap.look}}</div>
                         </div>
                         <div class="center-source-list-item">
                             <div class="content-center-source">有效到访</div>
                             <div class="content-center-num">{{epMap.visit}}</div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="content-lately">{{homeInfo.lableField}}</div>
         </div>
     </div>
     <div class="home-right-content-box">
        <div class="content-box-code">
            <div class="content-box-code-img">
                <div class="code-img">
                    <img :src="userdata.qrCode" />
                </div>
                <div class="code-text" @click="codeDownload(userdata.qrCode)">下载打印二维码</div>
            </div>
            <div class="content-box-code-text">推介给经纪人微信微信扫码注册后，即可成为合伙经济人，业务合作期间可参与与经纪人开通楼盘的代理。</div>
        </div>
        <div  class="content-box-button">
            <div class="copy-msg">
                <div class="copy-msg-left">分享链接</div>
                <div class="copy-msg-right">{{userdata.qrCodeUrl}}</div>
            </div>
            <button type="button"
                    class="copy-button"
                    v-clipboard:copy="userdata.qrCodeUrl"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError">复制</button>
        </div>
     </div>
   </div>
</template>
<style scoped rel="stylesheet/scss" lang="scss">
.home-right{
    width: 100%;
    .home-right-content{
        display: flex;
        flex-wrap: wrap;
        .home-content-item:hover{
            box-shadow:0px 2px 8px 1px rgba(0,0,0,0.09);
        }
        .home-content-item{
            width:329px;
            height:189px;
            background:rgba(255,255,255,1);
            border-radius:2px;
            border:1px #E8E8E8 solid;
            margin-left: 24px;
            margin-top: 28px;
            .content-center{
                display: flex;
                margin-left:24px ;
                margin-top: 24px;
                margin-bottom: 32px;
                .content-center-img{
                    width: 24px;
                    height: 24px;
                    margin-right: 8px;
                    img{
                        width: 24px;
                        height: 24px;
                    }
                }
                .content-center-title{
                    font-size:16px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.85);
                    line-height:24px;
                    margin-bottom: 14px;
                }
                .center-source-list{
                    display: flex;
                    .center-source-list-item{
                        min-width: 90px;
                    }
                }
                .content-center-source{
                    font-size:12px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.45);
                    line-height:20px;
                    margin-bottom: 4px;
                }
                .content-center-num{
                    font-size:24px;
                    font-family:HelveticaNeue-Medium;
                    font-weight:500;
                    color:rgba(0,0,0,0.65);
                    line-height:32px;
                    span{
                        font-size:14px;
                        font-family:PingFangSC-Medium;
                        font-weight:500;
                        color:rgba(0,0,0,0.65);
                        line-height:20px;
                    }
                }
            }
            .content-lately{
                width: 100%;
                height:40px;
                line-height: 40px;
                text-align: center;
                background:rgba(247,249,250,1);
                border-radius:0px 0px 2px 2px;
                font-size:14px;
                font-family:PingFang-SC-Regular;
                font-weight:400;
                color:rgba(0,0,0,0.45);
                border-top: 1px #E8E8E8 solid;
            }
        }
    }
    .home-right-content-box{
        width:329px;
        height:228px;
        background:rgba(255,255,255,1);
        border-radius:2px;
        border:1px #E8E8E8 solid;
        margin-left:24px;
        margin-top: 28px;
        .content-box-code{
            padding: 24px;
            display: flex;
            .content-box-code-img{
                margin-right: 12px;
                .code-img{
                    width:107px;
                    height:107px;
                    border-radius:3px;
                    border:1px #979797 solid;
                    display:flex;
                    justify-content: center;
                    img{
                        width:105px;
                        height:105px;
                        align-self: center;
                    }
                }
                .code-text{
                    width:107px;
                    text-align: center;
                    font-size:12px;
                    font-family:PingFang-SC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,0.45);
                    line-height:17px;
                    margin-top: 4px;
                    cursor: pointer;
                    color:rgba(24,144,255,1);
                }
            }
            .content-box-code-text{
                font-size:12px;
                font-family:PingFang-SC-Regular;
                font-weight:400;
                color:rgba(92,97,102,1);
                line-height:17px;
            }
        }
        .content-box-button{
            display: flex;
            margin-left: 24px;
            .copy-msg{
                width:225px;
                height:32px;
                background:rgba(255,255,255,1);
                border-radius:4px;
                border:1px #C2C7CC solid;
                display: flex;
                .copy-msg-left{
                    width:72px;
                    height:32px;
                    line-height: 32px;
                    font-size:12px;
                    font-family:PingFang-SC-Regular;
                    font-weight:400;
                    color:rgba(255,255,255,0.6);
                    background:rgba(194,199,204,1);
                    text-align: center;
               }
                .copy-msg-right{
                    width:132px;
                    font-size:12px;
                    font-family:PingFang-SC-Regular;
                    font-weight:400;
                    color:rgba(24,144,255,1);
                    line-height:32px;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                    margin-left: 7px;
                }
            }
            .copy-button{
                width:48px;
                height:32px;
                background:rgba(24,144,255,1);
                border-radius:4px;
                border:1px solid;
                font-size:14px;
                font-family:PingFang-SC-Regular;
                font-weight:400;
                color:rgba(255,255,255,0.98);
                /*line-height:32px;*/
                text-align: center;
                margin-left: 8px;
            }
        }
    }
    .home-right-title{
        background-color: #ffffff;
        width: 100%;
        display: flex;
        padding-top: 8px;
        border-bottom: 1px #DCE2E8 solid;
        div{
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(0,0,0,0.65);
            line-height:22px;
        }
        .home-right-title-item{
            min-width: 70px;
            text-align: center;
            margin: 0px 27px;
            cursor: pointer;
        }
        .title-active{
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(24,144,255,1);
        }
        .active-title-line{
            width:60px;
            height:2px;
            background:rgba(24,144,255,1);
            margin: 0 auto;
            margin-top: 12px;
        }
    }
}
</style>
<script>
    var AV = require('leancloud-storage');
    var moment = require('moment');
    var echarts = require('echarts');
    import { mapGetters } from 'vuex';
    export default {
      name: 'user_weight_report',
      data() {
          return {
             homeConten:1,
             homeInfo:{},
              linkerSize:"",
              csMap:{},
              epMap:{},
              userdata:{},
          };
      },
      computed: {
        ...mapGetters([
          'userData'
        ])
      },
      mounted(){
        this.gethomeInfo()
      },
      methods: {
          onCopy: function (e) {
              this.$message({
                  message: '复制成功！',
                  type: 'success'
              });
          },
          onError: function (e) {
              this.$message({
                  message: '复制失败！',
                  type: 'warning'
              });
          },
          codeDownload(img){
              window.open(img)
              this.$message({
                  message: '下载成功！',
                  type: 'success'
              });
          },
          homeTitle(num) {
              this.homeConten=num;
              this.gethomeInfo()
          },
          gethomeInfo(){
              let _this = this;
              let params={
                  type:_this.homeConten
              }
              _this.Api.setting.distHome(params).then((res)=>{
                  this.homeInfo=res.data
                  this.linkerSize=res.data.map.linkerSize
                  this.csMap=res.data.map.csMap
                  this.epMap=res.data.map.epMap
                  this.userdata=res.data.user
                  console.log(">>>>>>>>>>>>>>>>>>>>>>",res)
              })
          }
      }
    }
</script>